<script setup>
import {ref, reactive} from 'vue'
        // 帖子数据
        const postLiked = ref(false)
        const postLikes = ref(86)
        
        // 评论数据
        const newComment = ref('')
        const replyContent = ref('')
        const nestedReplyContent = ref('')
        const activeReplyId = ref(null)
        const activeReplyTo = ref(null)
        
        // 评论列表
        const comments = reactive([
          {
            id: 1,
            author: '李同学',
            time: '2小时前',
            content: '我有一本，几乎全新，需要的话可以联系我',
            likes: 12,
            replies: [
              {
                id: 11,
                author: '王同学',
                time: '1小时前',
                content: '什么价格？',
                likes: 3,
                replyTo: '李同学'
              },
              {
                id: 12,
                author: '张同学',
                time: '45分钟前',
                content: '可以发几张照片看看吗？',
                likes: 2,
                replyTo: '李同学'
              }
            ]
          },
          {
            id: 2,
            author: '刘老师',
            time: '3小时前',
            content: '学校图书馆有电子版可以免费下载，建议先看看电子版是否满足需求',
            likes: 24,
            replies: []
          },
          {
            id: 3,
            author: '陈同学',
            time: '5小时前',
            content: '我这本有一些笔记，但不影响阅读，半价出，需要吗？',
            likes: 8,
            replies: [
              {
                id: 31,
                author: '赵同学',
                time: '4小时前',
                content: '请问是哪个出版社的？',
                likes: 1,
                replyTo: '陈同学'
              }
            ]
          }
        ])
        
        // 点赞帖子
        const toggleLike = () => {
          postLiked.value = !postLiked.value
          postLikes.value += postLiked.value ? 1 : -1
        }
        
        // 添加评论
        const addComment = () => {
          if (!newComment.value.trim()) {
            ElMessage.warning('请输入评论内容')
            return
          }
          
          comments.unshift({
            id: Date.now(),
            author: '当前用户',
            time: '刚刚',
            content: newComment.value,
            likes: 0,
            replies: []
          })
          
          newComment.value = ''
          ElMessage.success('评论发表成功')
        }
        
        // 回复评论
        const toggleReply = (commentId) => {
          if (activeReplyId.value === commentId) {
            activeReplyId.value = null
          } else {
            activeReplyId.value = commentId
            activeReplyTo.value = null
            replyContent.value = ''
          }
        }
        
        const cancelReply = () => {
          activeReplyId.value = null
          replyContent.value = ''
        }
        
        const addReply = (commentId) => {
          if (!replyContent.value.trim()) {
            ElMessage.warning('请输入回复内容')
            return
          }
          
          const comment = comments.find(c => c.id === commentId)
          if (comment) {
            comment.replies.push({
              id: Date.now(),
              author: '当前用户',
              time: '刚刚',
              content: replyContent.value,
              likes: 0,
              replyTo: comment.author
            })
            
            replyContent.value = ''
            activeReplyId.value = null
            ElMessage.success('回复成功')
          }
        }
        
        // 嵌套回复
        const toggleReplyTo = (commentId, replyTo) => {
          if (activeReplyTo.value === commentId) {
            activeReplyTo.value = null
          } else {
            activeReplyTo.value = commentId
            activeReplyId.value = null
            nestedReplyContent.value = ''
          }
        }
        
        const cancelNestedReply = () => {
          activeReplyTo.value = null
          nestedReplyContent.value = ''
        }
        
        const addNestedReply = (commentId, replyTo) => {
          if (!nestedReplyContent.value.trim()) {
            ElMessage.warning('请输入回复内容')
            return
          }
          
          const comment = comments.find(c => c.id === commentId)
          if (comment) {
            comment.replies.push({
              id: Date.now(),
              author: '当前用户',
              time: '刚刚',
              content: nestedReplyContent.value,
              likes: 0,
              replyTo: replyTo
            })
            
            nestedReplyContent.value = ''
            activeReplyTo.value = null
            ElMessage.success('回复成功')
          }
        }
        
        // 点赞评论
        const toggleLikeComment = (commentId) => {
          const comment = comments.find(c => c.id === commentId)
          if (comment) {
            comment.likes += comment.liked ? -1 : 1
            comment.liked = !comment.liked
          }
        }
        
        // 点赞回复
        const toggleLikeReply = (commentId, replyId) => {
          const comment = comments.find(c => c.id === commentId)
          if (comment) {
            const reply = comment.replies.find(r => r.id === replyId)
            if (reply) {
              reply.likes += reply.liked ? -1 : 1
              reply.liked = !reply.liked
            }
          }
        }
        


</script>

<template>
<div class = "content-left">
        <div class = "card">
         <div class="text_title"> 出书购书</div>
         <hr>
         <div class="text_content">
            之前想买本二手专业书，跑遍学校书店都没找到，在校园集市上发了求购帖，没两天就有同学联系我，顺利拿下，价格还超划算。这种能快速匹配供需的功能，简直是 “及时雨”，让我们能轻松解决学习生活中的小难题。而且从沟通到交易，整个流程都很顺畅，线上交流、线下当面交易，安全又方便。
担任团支书期间，我也遇到诸多挑战，如活动组织协调困难、同学参与积极性不高等。但我从未退缩，通过不断学习和探索，提升自身组织协调能力，改进活动形式和内容，成功克服困难。未来，我将继续努力，不断提升自己，为团支部发展和同学们成长成才付出更多心血，为共青团事业贡献更大力量。
         </div>
       </div>
          <div class = "card">
               <!-- 评论区域 -->
      <div class="comments-container">
        <div class="comments-header">
          <i class="fas fa-comments"></i> 评论 ({{ comments.length }})
        </div>
        
        <div class="comment-form">
          <div class="comment-input">
            <div class="comment-avatar">
              <i class="fas fa-user"></i>
            </div>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="写下你的评论..."
              v-model="newComment"
            ></el-input>
          </div>
          <div class="comment-form-buttons">
            <el-button @click="newComment = ''">取消</el-button>
            <el-button type="primary" @click="addComment">发表评论</el-button>
          </div>
        </div>
        
        <div class="comments-list">
          <div v-if="comments.length === 0" class="no-comments">
            <i class="fas fa-comment-slash"></i>
            <h3>暂无评论</h3>
            <p>成为第一个评论的人吧</p>
          </div>
          
          <div v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <div class="comment-avatar-small">
                <i class="fas fa-user"></i>
              </div>
              <div>
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
            </div>
            
            <div class="comment-content">
              {{ comment.content }}
            </div>
            
            <div class="comment-actions">
              <div class="comment-action" @click="toggleLikeComment(comment.id)">
                <i class="fas fa-thumbs-up"></i>
                <span>{{ comment.likes }} 赞</span>
              </div>
              <div class="comment-action" @click="toggleReply(comment.id)">
                <i class="fas fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
            
            <!-- 回复表单 -->
            <div class="reply-form" v-if="activeReplyId === comment.id">
              <el-input
                v-model="replyContent"
                placeholder="写下你的回复..."
                size="small"
                class="reply-input"
              ></el-input>
              <el-button size="small" @click="cancelReply">取消</el-button>
              <el-button type="primary" size="small" @click="addReply(comment.id)">回复</el-button>
            </div>
            
            <!-- 回复列表 -->
            <div class="replies" v-if="comment.replies && comment.replies.length > 0">
              <div v-for="reply in comment.replies" :key="reply.id" class="comment-item">
                <div class="comment-header">
                  <div class="comment-avatar-small">
                    <i class="fas fa-user"></i>
                  </div>
                  <div>
                    <span class="comment-author">{{ reply.author }}</span>
                    <span class="comment-time">{{ reply.time }}</span>
                    <span v-if="reply.replyTo" style="color: #999; margin-left: 5px;">回复 @{{ reply.replyTo }}</span>
                  </div>
                </div>
                
                <div class="comment-content">
                  {{ reply.content }}
                </div>
                
                <div class="comment-actions">
                  <div class="comment-action" @click="toggleLikeReply(comment.id, reply.id)">
                    <i class="fas fa-thumbs-up"></i>
                    <span>{{ reply.likes }} 赞</span>
                  </div>
                  <div class="comment-action" @click="toggleReplyTo(comment.id, reply.author)">
                    <i class="fas fa-reply"></i>
                    <span>回复</span>
                  </div>
                </div>
                
                <!-- 嵌套回复表单 -->
                <div class="reply-form" v-if="activeReplyTo === reply.id">
                  <el-input
                    v-model="nestedReplyContent"
                    :placeholder="'回复 @' + reply.author"
                    size="small"
                    class="reply-input"
                  ></el-input>
                  <el-button size="small" @click="cancelNestedReply">取消</el-button>
                  <el-button type="primary" size="small" @click="addNestedReply(comment.id, reply.author)">回复</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="footer">
        <!--  -->
      </div>
    </div>
            
          </div>
        


</template>
<style scoped>
.content-left{
    width:700px;
    flex-shrink: 0;
    margin-right:10px;
    margin-top: -30px ;
}
.text_title{
     font-size: 24px;
  font-weight: bold;
  
}
.text_content{
      font-size: 16px;
  line-height: 2;
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #f5f9ff 0%, #eef4fd 100%);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      padding: 20px;
    }
    
    .app-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eaeef5;
    }
    
    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      margin-right: 30px;
    }
    
    .logo-icon {
      font-size: 32px;
      color: #3a7afe;
      margin-right: 12px;
    }
    
    .logo-text {
      font-size: 26px;
      font-weight: bold;
      color: #3a7afe;
    }
    
    .nav-links {
      display: flex;
      gap: 25px;
    }
    
    .nav-link {
      color: #555;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
      padding: 8px 0;
      position: relative;
    }
    
    .nav-link:hover, .nav-link.active {
      color: #3a7afe;
    }
    
    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: #3a7afe;
      border-radius: 3px;
    }
    
    .post-container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      margin-bottom: 30px;
    }
    
    .post-header {
      padding: 25px 30px;
      background: linear-gradient(to right, #3a7afe, #5b8cff);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .post-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .post-meta {
      display: flex;
      align-items: center;
      font-size: 14px;
      opacity: 0.9;
    }
    
    .post-meta-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    
    .post-meta-item i {
      margin-right: 6px;
    }
    
    .post-content {
      padding: 30px;
    }
    
    .post-text {
      font-size: 16px;
      line-height: 1.8;
      color: #444;
      margin-bottom: 25px;
      white-space: pre-line;
    }
    
    .post-images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }
    
    .post-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
    
    .post-footer {
      padding: 15px 30px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .post-actions {
      display: flex;
      gap: 20px;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      background: #f5f8ff;
      border: none;
      padding: 8px 15px;
      border-radius: 20px;
      color: #555;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
    }
    
    .action-btn:hover {
      background: #e1ebff;
      color: #3a7afe;
    }
    
    .action-btn i {
      margin-right: 6px;
    }
    
    .action-btn.liked {
      color: #ff3860;
    }
    
    .comments-container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      margin-bottom: 30px;
    }
    
    .comments-header {
      padding: 20px 30px;
      font-size: 20px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
      color: #3a7afe;
      display: flex;
      align-items: center;
    }
    
    .comments-header i {
      margin-right: 12px;
    }
    
    .comment-form {
      padding: 25px 30px;
      border-bottom: 1px solid #f0f4ff;
      background: #fafcff;
    }
    
    .comment-input {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
    }
    
    .comment-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      background: #e1ebff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3a7afe;
      font-size: 20px;
      flex-shrink: 0;
    }
    
    .comment-form-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      margin-top: 15px;
    }
    
    .comments-list {
      padding: 0;
    }
    
    .comment-item {
      padding: 25px 30px;
      border-bottom: 1px solid #f0f4ff;
      transition: background 0.3s;
    }
    
    .comment-item:hover {
      background: #fafcff;
    }
    
    .comment-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .comment-avatar-small {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      background: #e1ebff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3a7afe;
      font-size: 16px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .comment-author {
      font-weight: 600;
      color: #3a7afe;
      margin-right: 10px;
    }
    
    .comment-time {
      color: #999;
      font-size: 13px;
    }
    
    .comment-content {
      color: #444;
      margin-left: 48px;
      margin-bottom: 15px;
      line-height: 1.6;
    }
    
    .comment-actions {
      display: flex;
      gap: 20px;
      margin-left: 48px;
      font-size: 14px;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      color: #777;
      cursor: pointer;
      transition: color 0.3s;
    }
    
    .comment-action:hover {
      color: #3a7afe;
    }
    
    .comment-action i {
      margin-right: 5px;
    }
    
    .replies {
      margin-top: 25px;
      padding-left: 48px;
      border-left: 2px solid #e1ebff;
    }
    
    .reply-form {
      margin-top: 15px;
      margin-left: 48px;
      display: flex;
      gap: 15px;
    }
    
    .reply-input {
      flex: 1;
    }
    
    .footer {
      text-align: center;
      padding: 30px;
      color: #777;
      font-size: 14px;
    }
    
    .no-comments {
      text-align: center;
      padding: 50px 20px;
      color: #999;
    }
    
    .no-comments i {
      font-size: 64px;
      margin-bottom: 20px;
      color: #d0e0ff;
    }
    
    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .logo {
        margin-bottom: 15px;
      }
      
      .nav-links {
        flex-wrap: wrap;
        gap: 10px;
      }
      
      .post-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
      
      .comment-input {
        flex-direction: column;
      }
      
      .comment-avatar {
        align-self: flex-start;
      }
      
      .replies {
        padding-left: 20px;
      }
    }
</style>